* {
  margin: 0; padding: 0;
}
.container-big {
  width: 980px; height: 1386px; border: 1px solid #ccc;
  box-shadow: 2px 2px 2px #ccc; margin: 0 auto;
}
.poster {
  width: 892px; height: 1386px; margin: 0 auto; z-index: -99;
}

.top {
  width: 892px; border-bottom: 2px solid #938e8c;
  font-family: "SimHei","Times New Roman",serif; font-size: 12px; overflow: hidden;
}
.top .colorblock {
  float: left; width: 110px; height: 61px; background: #d45d5c;
}
.colorblock > p {
  color: #ffffff; float: left; margin: 42px 0px 0px 5px;
}
.top > p {
  float: right; color: #d45d5c; margin-top: 42px;
}
.container-1 {
  margin-top: 40px;
}
.laptop-1 img {
  display: inline-block; width: 641px; height: 301px; z-index: -1;
}
.green {
  width: 191px; height: 301px; position: absolute; background: rgba(46, 139, 87, .4);
  z-index: 0; display: inline-block;
}
.red {
  width: 191px; height: 301px; position: absolute; background: rgba(212, 93, 92, .3);
  z-index: 0; margin-left: -191px;  display: inline-block;
}
.word-right {
  float: right; width: 203px; height: 301px; border-top: 2px solid #cc8091;
}
.title-technology {
  text-decoration: underline; font-size: 24px; line-height: 40px; font-family: "Microsoft YaHei";
  font-variant: small-caps; text-transform:capitalize
}
.technology > p {
  font-size: 12px; color: #676767; font-family: "楷体","Times New Roman",serif;
  line-height: 10px; font-style: italic;
}
.seven-hundred {
  font-size: 116px; font-family: "Microsoft YaHei"; color: #75b86b; font-style: italic;
  margin-left: -18px;
}
.three-two {
  font-family: "Microsoft YaHei"; color: #cc8091;
}
.three-two > p {
  font-size: 55px; position: absolute; margin-top: -15px; width: 80px;
}
.twoline {
  display: inline-block; margin-left: 80px; font-family: "Microsoft YaHei"; color: #cc8091;
  margin-top: 18px; line-height: 12px;
}
.twoline > p {
  font-size: 12px;
}
.twoline-1 {
  font-size: 21px;
}

.container-2 {
  margin-top: 20px; position: absolute; min-width: 640px; overflow: hidden;
}
.title-what, .title-when, .title-how {
  font-size: 16px; font-weight: bold; text-decoration: underline; padding: 10px 0px; font-family: "Microsoft YaHei";
}
.title-what {
  color: #418c59;
}
.title-when {
  color: #d2994f;
}
.title-how {
  color: #cc7680;
}
.card-1, .card-2, .card-3 {
  float: left; margin-right: 20px; font-size: 12px; line-height: 16px;
}
.card-1 {
  width: 230px; color: #767777; font-family: "宋体";
}
.card-2 {
  width: 210px; color: rgba(90,90,90,.7); font-family: "Microsoft YaHei";
}
.card-3 {
  width: 140px; color: rgba(90,90,90,.7);
}
.card-3 .text {
  padding-bottom: 5px;
}
.ullist {
  list-style: none; padding: 5px 0px 0px 5px; color: #676767; line-height: 20px;
}
.number {
  color: #cd4a48; font-style: italic; opacity: 0.7;
}

.container-bottom {
  margin-top: 270px; overflow: hidden;
}
.container-3 {
  display: block; width: 415px; float: left;
}
.front-technology {
  text-transform: uppercase; font: bold 42px/42px 黑体; color: #11456b;
  border-bottom: 2px solid #11456b; padding-bottom: 10px;
}
.front-technology .THEword {
  font-size: 72px; font-style: italic; color: #f5e327; z-index: 1;
}
.chinese {
  font-size: 33px;
}
.wordtext {
  font-size: 12px; color: rgba(118, 119, 119, .7); font-family: "宋体"; line-height: 16px; margin-top: 25px;
}
.wordtext::first-letter {
  display: block; float: left; font-size: 70px; color: #f5e327; font-family: "Microsoft YaHei"; padding: 25px 5px 25px 0px;
}
.laptop-3 {
  float: right; margin: 15px 6px 15px 20px;
}
.indent-two {
  text-indent: 2em;
}
.container-4 {
  float: right; width: 458px; z-index: -1;
}

.laptop-2 .cover {
  background: rgba(25, 25, 25, .5); z-index: 0; width: 458px; height: 61px; position: absolute;
  margin-top: -64px;
}
.cover p {
  font-size: 16px; font-style: italic; font-family: "Microsoft YaHei"; color: #72b16a; margin-top: 8.5px;
  border-left: 3px solid #72b16a; letter-spacing: 140%; margin-left: 40px; padding: 3px 0px 6px 0px;
}
.cover .whitetext {
  font-size: 26px; color: #ffffff; padding: 0px 10px; font-style: normal;
}
.lastblock {
  margin-top: 20px; width: 459px; height: 318px; background: #eeedd6; position: relative;
}
.ultext {
  padding: 20px 0px 0px 40px;
}
.ultext li {
  font-size: 16px; color: #5a5b5b; letter-spacing: 2px; line-height: 36px; font-family: "STSong";
  list-style: none; padding-left: 20px;
}
.i-small {
  font-style: italic; font-size: 12px; font-family: "STSong";
}
.triangle-up {
  width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid #11456b; position: absolute; margin-right: 20px; margin-top: 14px;
}
.redblock {
  background: #d45d5c; width: 260px; height: 160px; position: absolute; left: 0; bottom: 0;
}
.redblock > p {
  color: #ffffff; font-size: 110px; position: absolute; margin-top: 7.5px; margin-left: 10px;
}
.lasttext-left {
  position: absolute; margin-top: 30px; margin-left: 79px;
  padding: 10px 2px;
}
.lasttext-left .order, .hello{
  color: #ffffff; font-family: "SimHei"; line-height: 24px; padding-left: 10px;
}
.white-line {
  float: left; background: #ffffff; width: 2px; height: 86px; margin-top: 37px; margin-left: 80px;
}
.order {
  font-size: 21px; line-height: 24px; font-style: italic;
}
.hello {
  font-size: 12px; line-height: 15px; padding-top: 6px;
}
.quotation {
  position: absolute; bottom: 0; right: 0; width: 180px; margin-bottom: 50px;
}
.quotation p {
  font-size: 14px; color: #5a5b5b; font-family: "SimHei"; font-style: italic;
  text-indent: 2em;
}
.quotation p::before, .quotation p::after {
  content: "“\00A0"; font-size: 72px; color: #d45d5c; font-style: normal;
  position: absolute; margin: -20px 0px 0px -95px;
}
.quotation p::after {
  content: "”"; margin: -5px 0px 0px -20px;
}

